<template>
    <view class="container">
        <view class="container-title">请输入你想要添加的产品信息</view>
        <view class="container-item">
            <view>品类</view>
            <view class="container-btn">台球杆</view>
        </view>
         <view class="container-item">
            <view>品牌<span class="brand">*</span></view>
            <input v-model.trim="context.brand" class="container-btn" placeholder-style="color: rgba(0, 0, 0, 0.3);" placeholder="请输入品牌" />
        </view>
         <view class="container-item">
            <view>名称/型号<span class="brand">*</span></view>
            <input v-model.trim="context.model" class="container-btn" placeholder-style="color: rgba(0, 0, 0, 0.3);" placeholder="请输入名称/型号" />
        </view>
        <view class="container-btn-group">
            <view class="container-btns" @click="comfimFn">
                申请添加
            </view>
        </view>
        <success-popup :visible="showPopup" :brand="context.brand" :model="context.model" @update:visible="val => showPopup = val" />
    </view>
</template>
<script setup>
import { ref } from 'vue'
import { request  } from '../utils/request'
const context = ref({
    brand: '',
    model: ''
})
const showPopup = ref(false)

const comfimFn = async() => {
    if(context.value.brand == ''){
        uni.showToast({
            title: '请输入品牌名称',
            icon: 'none'
        }, 3000)
        return
    } else if(context.value.model == ''){
        uni.showToast({
            title: '请输入型号',
            icon: 'none'
        }, 3000)
        return
    }
    await request({
        url: '/user/add/brand',
        method: 'POST',
        header: {
        'Content-Type': 'application/json'
        },
        data: {
            brandName: context.value.brand,
            productName: context.value.model,
        }
    })
  .then(async(res) => {
    if(res.code == 200) {
        showPopup.value = true
    } else {
      uni.showToast({
        title: res.data.message || '新增失败',
        icon: 'none'
      })
    }
  })
}
</script>
<style scoped>
.container{
    padding: 20rpx 20rpx;
}
.container-item{
    margin-top: 20rpx;
    font-weight: bold;
    font-size: 34rpx;
}
.container-title{
    font-size: 34rpx;
    font-weight: bold;
    margin-bottom: 40rpx;
    margin-top: 4rpx;
}
.brand{
    color: red;
}
.container-btn{
    background: #f8f8f8;
    padding: 25rpx;
    border-radius: 60rpx;
    margin-bottom: 20rpx;
    text-align: center;
    margin: 16rpx 0;
    border: 1px solid #eeecec;
    color: rgba(0, 0, 0, 0.3);
    font-weight: normal;
}
.container-btn-group{
    margin-top: 80rpx;
}
.container-btns{
    background: linear-gradient(to right, #45b5ff, #2b65f6);
    color: #fff;
    padding: 25rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    text-align: center;
    /* margin: 10rpx 60rpx; */
    width: 580rpx;
    margin: auto;
}
.container-btn::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
</style>